<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>客户登录系统-登录</title>
    <link type="text/css" rel="stylesheet" href="/css/style.css" />
</head>
<script type="text/javascript" src="../vue/vue.js"></script>
<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="./js/base64.js"></script>
<script type="text/javascript" src="../js/crypto-js-4.0.0/crypto-js.js" ></script>
<script type="text/javascript" src="../js/crypto-js-4.0.0/aes.js" ></script>
<style>

    .se{
        background-color: #12ff59;
        border: #3e75ff;
        width: 2rem;
        height: 3rem;
    }
</style>

<body>
<div id="dologin">
    <div class="login-box">
        <input type="text" v-model="num">
        <button v-on:click="num++">点我</button>

        {{name}}
        有{{num}}个鸡巴
<select  v-model="language">
<option   value="JAVA" >JAVA</option>
    <option value="C" >C</option>
    <option value="c++" >c++</option>
</select>
        你选的是{{language}}
<br>
        数据1<input v-model="a" v-on:keyup.enter="suan">
        数据2<input v-model="b" v-on:keyup.enter="suan">
<button v-on:click="suan">suan</button>
        结果<span v-text="result"></span>


        <p>
            <div  v-bind:class="{ se : isse }">66</div>
            <button v-on:click="yise">异色</button>
        </p>

        <div>
           <ul>
<li v-for='item in fruits'>{{item}}</li>
           </ul>

               <div>  </div>
        <div class="login-title">客户录入信息系统</div>
        <form id="login">
        <table>
            <table>
                <tr>
                    <td>手机号:</td>
                    <td>
                        <input id="tel" type="text"  v-model="tel" />
                    </td>
                    <td id="checkTel"></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <button id="submit"  @click="login">登录</button>
                    </td>
                </tr>
            </table>
        </table>
        </form>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#dologin',
        data: {
            language:"",
            name:"孙磊",
            num:1,
            a:0,
            b:0,
            result:"",
            isse:true,
            fruits:["江泽民","李克强","胡锦涛"]
        },
        methods: {
            login: function() {
                var formData = {
                    tel: this.tel
                };

               axios.post("/toThelist",formData);

            },
            suan:function () {
               this.result= parseInt(this.a)+parseInt(this.b)
            }
            ,yise:function () {
                this.isse=!this.isse
            }
        }
    })


    /*if ("${msg}"){
        alert("${msg}");
    }
    <c:remove var="msg" scope="session"></c:remove>
    var newFlag=true;
*/

    $("#tel").bind("blur", function(){

        //需要验证的内容 电话号码
        var msg = $("#tel").val();

        //验证
        // /a{1,2}/
        // /a{1,2}/g
        // var flag = /^(?![^0-9]+$)(?![^a-z]+$)(?![^A-Z]+$).{6,10}$/.Test(msg);
        //
        // var result=null;
        //判断
        // if(flag){
        //     result="电话号码符合规范"
        //     newFlag=true;
        // }else if(!flag){
        //     result="电话号码不符合规范，请重新输入";
        //     newFlag=false;
        // }

        //显示
        // $(":text").next().html(arr.join(","));
        $("#checkTel").html("验证结果:" + result);
    })

    $("#idCard").bind("blur", function(){

        //需要验证的内容 身份证号
        var msg = $("#idCard").val();

        //验证
        // /a{1,2}/
        // /a{1,2}/g
        var flag = /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[Xx\d]$/.test(msg);

        var result=null;
        //判断
        if(flag){
            result="身份证号符合规范";
            newFlag=true;
        }else if(!flag){
            result="身份证号不符合规范，请重新输入";
            newFlag=false;

        }

        //显示
        // $(":text").next().html(arr.join(","));
        $("#checkIdCard").html("验证结果:" + result);
    })

    $("#submit").bind("click", function(){

        //AES加密
        var key = "ABCDEFGHIJKL_key";
        var iv = "ABCDEFGHIJKLM_iv";
  //      var encryptedPwd = aesMinEncrypt(key,iv,password);
            //提交并且加密
            var idCard = $('#idCard').val(); // 获取输入框中的文本
            var encodedidCard = aesMinEncrypt(key,iv,idCard); // 将文本进行Base64加密
            console.log(encodedidCard);

            var tel = $('#tel').val(); // 获取输入框中的文本
            var encodedtel = aesMinEncrypt(key,iv,tel);// 将文本进行Base64加密
            console.log(encodedtel);
            //网页跳转
            // $.post({
            //    url: "/usersOther/insertUsers",
            //     contentType: "application/json; charset=utf-8"  ,
            //    data:{
            //        name:$("#name").val(),
            //        idCard:encodedidCard,
            //        telNum:encodedtel
            //    },
            //     dataType:"json"
            //
            // })
        window.location.href="/usersOther/insertUsers"+"?"+"name="+$("#name").val()
        +"&idCard="+encodedidCard+"&telNum="+encodedtel;


    })
    function aesMinEncrypt(key, iv, word){
        var _word = CryptoJS.enc.Utf8.parse(word),
            _key = CryptoJS.enc.Utf8.parse(key),
            _iv = CryptoJS.enc.Utf8.parse(iv);
        var encrypted = CryptoJS.AES.encrypt(_word, _key, {
            iv: _iv,
            mode: CryptoJS.mode.CBC,
            padding: CryptoJS.pad.Pkcs7
        });
        return encrypted.toString();
    }

</script>
</html>
